<template>
  <a-config-provider :locale="locale">
    <a-card :bordered="false" class="card-area">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <!-- 搜索区域 -->
        <a-form layout="inline" @keyup.enter.native="getDetail">
          <a-row :gutter="24" style="padding-left:30px;">
            <a-col :md="6" :sm="24">
              <a-form-item label="单据日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-range-picker
                  style="width: 100%"
                  v-model="queryParam.createTimeRange"
                  format="YYYY-MM-DD"
                  :placeholder="['开始时间', '结束时间']"
                  @change="onDateChange"
                  @ok="onDateOk"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24" v-if="orgaTree.length">
              <a-form-item label="机构" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-tree-select style="width:100%" allow-clear :treeData="orgaTree"
                               v-model="queryParam.organizationId" placeholder="请选择机构">
                </a-tree-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-button type="primary" @click="getDetail">查询</a-button>
                <a-button style="margin-left: 8px" v-print="'#reportPrint'" icon="printer">打印</a-button>
              </span>
            </a-col>
          </a-row>
          <section ref="print" id="reportPrint">
          <a-row :gutter="24">
            <div class="box-body form-inline detail-head">
              <div class="detail-head-group">
                利润
              </div>
              <div class="detail-head-group">
                =
              </div>
              <div class="detail-head-group">
                收入
              </div>
              <div class="detail-head-group">
                -
              </div>
              <div class="detail-head-group">
                支出
              </div>
            </div>
            <div class="box-body form-inline detail-head">
              <div class="detail-head-group">
                <span id="profit">{{profitDetail.profit}}</span>
              </div>
              <div class="detail-head-group">
                &nbsp;
              </div>
              <div class="detail-head-group">
                <span id="incomeTotal">{{profitDetail.incomeTotal}}</span>
              </div>
              <div class="detail-head-group">
                &nbsp;
              </div>
              <div class="detail-head-group">
                <span id="paymentTotal">{{profitDetail.paymentTotal}}</span>
              </div>
            </div>
            <div class="box-body form-inline detail-item">
              <ul>
                <li>
                  <div class="group-head-left">
                    <b>项目列表</b>
                  </div>
                  <div class="group-head-right">
                    <b>本期金额（元）</b>
                  </div>
                </li>
                <li>
                  <div class="group-item-left">
                    【收入类】
                  </div>
                  <div class="group-item-right">
                    <span id="incomeTotalPrice" class="text-red">{{profitDetail.incomeTotalPrice}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    零售出库
                  </div>
                  <div class="group-item-right">
                    <span id="retailOut">{{profitDetail.retailOut}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    销售订单
                  </div>
                  <div class="group-item-right">
                    <span id="saleOrder">{{profitDetail.saleOrder}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    销售出库
                  </div>
                  <div class="group-item-right">
                    <span id="saleOut">{{profitDetail.saleOut}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    采购退货
                  </div>
                  <div class="group-item-right">
                    <span id="purchaseBack">{{profitDetail.purchaseBack}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    盘盈
                  </div>
                  <div class="group-item-right">
                    <span id="stockCheckProfit">{{profitDetail.stockCheckProfit}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    收入单
                  </div>
                  <div class="group-item-right">
                    <span id="itemIn">{{profitDetail.itemIn}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    收款单
                  </div>
                  <div class="group-item-right">
                    <span id="moneyIn">{{profitDetail.moneyIn}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    收预付款
                  </div>
                  <div class="group-item-right">
                    <span id="advanceIn">{{profitDetail.advanceIn}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left">
                    【支出类】
                  </div>
                  <div class="group-item-right">
                    <span id="paymentTotalPrice" class="text-red">{{profitDetail.paymentTotalPrice}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    零售退货
                  </div>
                  <div class="group-item-right">
                    <span id="retailBack">{{profitDetail.retailBack}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    销售退货
                  </div>
                  <div class="group-item-right">
                    <span id="saleBack">{{profitDetail.saleBack}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    采购订单
                  </div>
                  <div class="group-item-right">
                    <span id="purchaseOrder">{{profitDetail.purchaseOrder}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    采购入库
                  </div>
                  <div class="group-item-right">
                    <span id="purchaseIn">{{profitDetail.purchaseIn}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    盘亏
                  </div>
                  <div class="group-item-right">
                    <span id="stockCheckLoss">{{profitDetail.stockCheckLoss}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    支出单
                  </div>
                  <div class="group-item-right">
                    <span id="itemOut">{{profitDetail.itemOut}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left item-padd">
                    付款单
                  </div>
                  <div class="group-item-right">
                    <span id="moneyOut">{{profitDetail.moneyOut}}</span>
                  </div>
                </li>
                <li>
                  <div class="group-item-left">
                    利润
                  </div>
                  <div class="group-item-right">
                    <span id="profitPrice" class="text-red">{{profitDetail.profitPrice}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </a-row>
          <a-row :gutter="24">
            <div class="form-tip">注：销售出库只统计本次收款（不含欠款），采购入库只统计本次付款（不含欠款）</div>
          </a-row>
          </section>
        </a-form>
      </div>
    </a-card>
  </a-config-provider>
</template>

<script>
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { updateTheme } from '@/components/tools/setting'
  import { DEFAULT_COLOR } from "@/store/mutation-types"
  import { getAllOrganizationTreeByUser} from '@/api/api'
  import { getFormatDate, getPrevMonthFormatDate } from '@/utils/util'
  import {getAction} from '@/api/manage'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import moment from 'moment'
  import Vue from 'vue'
  export default {
    name: 'ProfitReport',
    mixins:[JeecgListMixin],
    components: {
      JEllipsis
    },
    data () {
      return {
        locale: zhCN,
        // 查询条件
        queryParam: {
          beginTime: getPrevMonthFormatDate(3),
          endTime: getFormatDate(),
          createTimeRange: [moment(getPrevMonthFormatDate(3)), moment(getFormatDate())],
          organizationId: undefined
        },
        ipagination:{
          pageSizeOptions: ['10', '100', '200']
        },
        dateFormat: 'YYYY-MM-DD',
        currentDay: moment().format('YYYY-MM-DD'),
        defaultTimeStr: '',
        orgaTree: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
        disableMixinCreated: true,
        profitDetail: {
          profit: '',
          incomeTotal: '',
          paymentTotal: '',
          profitPrice: '',
          incomeTotalPrice: '',
          paymentTotalPrice: ''
        },
        url: {
          detail: "/api/plugin/profit-report/profitReport/getDetail"
        }
      }
    },
    created() {
      this.getDetail()
      this.loadAllOrgaData()
    },
    mounted () {
      this.primaryColor = Vue.ls.get(DEFAULT_COLOR)
      updateTheme(this.primaryColor)
    },
    methods: {
      moment,
      getDetail() {
        let param = {
          beginTime: this.queryParam.beginTime,
          endTime: this.queryParam.endTime,
          organizationId: this.queryParam.organizationId
        }
        getAction(this.url.detail, param).then((res)=>{
          if(res.code === 200){
            let detail = res.data
            this.profitDetail.profit = "￥"+detail.profit.toFixed(2)
            this.profitDetail.incomeTotal = "￥"+detail.income.total.toFixed(2)
            this.profitDetail.paymentTotal = "￥"+detail.payment.total.toFixed(2)
            this.profitDetail.profitPrice = detail.profit.toFixed(2)
            this.profitDetail.incomeTotalPrice = detail.income.total.toFixed(2)
            this.profitDetail.paymentTotalPrice = detail.payment.total.toFixed(2)
            // //收入
            this.profitDetail.retailOut = detail.income.retailOut.toFixed(2)
            this.profitDetail.saleOrder = detail.income.saleOrder.toFixed(2)
            this.profitDetail.saleOut = detail.income.saleOut.toFixed(2)
            this.profitDetail.purchaseBack = detail.income.purchaseBack.toFixed(2)
            this.profitDetail.stockCheckProfit = detail.income.stockCheckProfit.toFixed(2)
            this.profitDetail.itemIn = detail.income.itemIn.toFixed(2)
            this.profitDetail.moneyIn = detail.income.moneyIn.toFixed(2)
            this.profitDetail.advanceIn = detail.income.advanceIn.toFixed(2)
            // //支出
            this.profitDetail.retailBack = detail.payment.retailBack.toFixed(2)
            this.profitDetail.saleBack = detail.payment.saleBack.toFixed(2)
            this.profitDetail.purchaseOrder = detail.payment.purchaseOrder.toFixed(2)
            this.profitDetail.purchaseIn = detail.payment.purchaseIn.toFixed(2)
            this.profitDetail.stockCheckLoss = detail.payment.stockCheckLoss.toFixed(2)
            this.profitDetail.itemOut = detail.payment.itemOut.toFixed(2)
            this.profitDetail.moneyOut = detail.payment.moneyOut.toFixed(2)
          }else{
            this.$message.info(res.data);
          }
        })
      },
      loadAllOrgaData(){
        let that = this
        let params = {}
        getAllOrganizationTreeByUser(params).then((res)=>{
          if(res){
            that.orgaTree = res
          }
        })
      },
      onDateChange: function (value, dateString) {
        this.queryParam.beginTime=dateString[0]
        this.queryParam.endTime=dateString[1]
        if(dateString[0] && dateString[1]) {
          this.queryParam.createTimeRange = [moment(dateString[0]), moment(dateString[1])]
        }
      },
      onDateOk(value) {
        console.log(value);
      }
    }
  }
</script>

<style scoped>
  @import '~@assets/less/common.less'
</style>
<style scoped>
  .detail-head {
    float:left;
    width:1200px;
  }
  .detail-head .detail-head-group{
    float:left;
    width:150px;
    text-align:center;
    font-size: 16px;
    padding-top: 8px;
    padding-left: 15px;
  }
  .detail-head .detail-head-group span{
    color: red;
    font-weight: bold;
  }
  .detail-item {
    float:left;
    width:1200px;
    padding-top: 8px;
    height: 600px;
  }
  .detail-item ul li{
    float: left;
    width: 800px;
    list-style:none;
  }
  .detail-item ul li .group-head-left{
    float:left;
    width:390px;
    text-align:left;
    padding: 5px;
    border-top: 1px solid #95B8E7;
    border-left: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }
  .detail-item ul li .group-head-right{
    float:left;
    width:390px;
    text-align:left;
    padding: 5px;
    border: 1px solid #95B8E7;
  }
  .detail-item ul li .group-item-left{
    float:left;
    width:390px;
    text-align:left;
    padding: 5px;
    border-left: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }
  .detail-item ul li .group-item-right{
    float:left;
    width:390px;
    text-align:left;
    padding: 5px;
    border-left: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
    border-right: 1px solid #95B8E7;
  }
  .detail-item ul li .item-padd {
    padding-left: 40px;
  }
  .detail-item ul li .text-red{
    color: red;
  }
  .form-tip {
    padding: 30px 40px 0px 40px;
  }
</style>